﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>关于我单页-杨青青个人博客模板主题《今夕何夕》</title>
    <meta name="keywords" content="blog"/>
    <meta name="description" content="blog"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/base.css" rel="stylesheet">
    <link href="/css/m.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/comm.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <!--    <script src="/ele/index.js"></script>-->
    <script src="/js/modernizr.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar1 {
            width: 178px;
            height: 178px;
            display: block;
        }
        /*.el-icon-edit-outline{color: white}*/
        .el-icon-edit-outline:before{content:"\e764";}
    </style>
</head>
<body>
<div id="app">
    <!--top begin-->
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh"><span class="navicon"></span></h2>
            <div class="logo"><a href="#">乐享平台</a></div>
            <nav>
                <ul id="starlist">
                    <li><a href="/toIndex">首页</a></li>
                    <li><a href="/list">文章</a></li>
                    <li class="menu"><a href="list2.html">资源共享</a>
                        <ul class="sub">
                            <li><a href="/6">文档</a></li>
                            <li><a href="/7">音乐</a></li>
                            <li><a href="/8">视频</a></li>
                            <li><a href="/7">软件</a></li>
                            <li><a href="/8">笔记</a></li>
                        </ul>
                        <span></span></li>
                    <li><a href="/about" id="selected">个人中心</a></li>
                    <li><a href="/write"><i class="el-icon-edit-outline" style="color: white;font-size: 35px;padding-top: 10px;"></i></a></li>
                    <!--        <li><a href="daohang.html"></a></li>-->
                    <!--        <li><a href="about.html">关于我</a></li>-->
                </ul>
            </nav>
            <div class="searchico"></div>
        </div>
    </header>
    <div class="searchbox">
        <div class="search">
            <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
                <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词"
                       style="color: rgb(153, 153, 153);"
                       onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                       onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
                <input name="show" value="title" type="hidden">
                <input name="tempid" value="1" type="hidden">
                <input name="tbname" value="news" type="hidden">
                <input name="Submit" class="input_submit" value="搜索" type="submit">
            </form>
        </div>
        <div class="searchclose"></div>
    </div>
    <!--top end-->
    <article>
        <div class="whitebg about">
            <h1 class="gd_title">个人中心</h1>
            <div class="ab_box"><i class="avatar_pic"><img :src="userDTO.user.avatar"></i>
                <h3>{{userDTO.user.username}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{userDTO.user.sex==0?'男':'女'}}</h3>
                <p>生日：{{userDTO.user.birthday}}&nbsp;&nbsp;&nbsp;电话：{{userDTO.user.phone}}</p>
                <p>{{userDTO.user.profile}}</p>
                <span class="ly_button"><a onclick="app.showUpdate()">修改资料</a></span>
                <!--                修改个人信息-->
                <template>
                    <el-dialog title="个人信息" :visible.sync="updateInfo">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="头像">
                                <div style="padding-top: 5px;word-break:break-all">
                                    <span>
                                    <el-upload class="avatar-uploader" action="/uploadFile" :show-file-list="false"
                                               name="file" :on-success="handleAvatarSuccess"
                                               :before-upload="beforeAvatarUpload">
                                        <img v-if="fm_user.avatar" :src="fm_user.avatar" class="avatar1">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </span>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="昵称">
                                <el-input v-model="fm_user.username" size="mini">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="性别">
                                <el-select placeholder="请选择" size="mini" v-model="fm_user.sex">
                                    <el-option key="0" value="0" label="男"></el-option>
                                    <el-option key="1" value="1" label="女"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="电话">
                                <el-input v-model="fm_user.phone" size="mini">
                                </el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="生日">
                                <el-date-picker size="mini" type="date" v-model="fm_user.birthday"
                                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期">
                                </el-date-picker>
                            </el-descriptions-item>
                        </el-descriptions>
                        <div style="padding-top: 5px;word-break:break-all">
                            <span class="t-bb">简介：</span><br>
                            <span>
                                    <el-input style="padding-top: 5px;" :rows="3" v-model="fm_user.profile"
                                              type="textarea">
                                        </el-input>
                                </span>
                        </div>
                        <div style="padding-top: 5px;word-break:break-all">
                            <span class="t-bb">自我介绍：</span><br>
                            <span>
                                    <el-input style="padding-top: 5px;" :rows="6" v-model="fm_user.introduction"
                                              type="textarea">
                                        </el-input>
                                </span>
                        </div>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="updateInfo = false">取 消</el-button>
                                <el-button type="primary" @click="updateUser()">确 定</el-button>
                            </span>
                    </el-dialog>
                </template>
            </div>
            <h2 class="gd_title">自我介绍</h2>
            <p class="ab_dubai">{{userDTO.user.introduction}}</p>
            <div class="lbox" style="width: 1000px;">
                <div class="whitebg bloglist">
                    <h2 class="gd_title">我的博客</h2>
                    <template v-for="article in userDTO.articleList">
                        <div style="width: 780px;float: left;padding: 15px;border-radius: 4px;margin: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                            <li>
                                <h3 class="blogtitle"><a href="/" target="_blank">{{article.title}}</a></h3>
                                <span class="blogpic imgscale">
<!--                            <i>-->
<!--                                <a href="/">{{article.columnname}}</a>-->
<!--                            </i>-->
                            <a href="/" title=""><img :src="article.image" alt=""></a>
                        </span>
                                <p class="blogtext">{{article.introduction}}</p>
                                <div style="margin-bottom: 5px;float: bottom;">
                                    <p class="bloginfo" style="float: bottom"><i class="avatar"><img
                                            :src="userDTO.user.avatar"></i>
                                        <span>{{article.username}}</span><span>{{article.updatetime}}</span>
                                        <span>【<a href="/">{{article.columnname}}</a>】</span>
                                    </p>
                                    <a class="viewmore" :href="'/page/article.html?id=' + article.id">阅读更多</a>
                                </div>
                            </li>
                            <el-row>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple">
                                        <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                            <img src="/img/unlike.png" width="20px" height="20px"
                                                 style="margin:0 auto;padding: 8px;vertical-align: middle;float: left">
                                            <span style="float:left;line-height: 36px">{{article.thumbup}}</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple">
                                        <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                            <img src="/img/comment.png" width="20px" height="20px"
                                                 style="margin:0 auto;padding: 8px;vertical-align: middle;float: left">
                                            <span style="float:left;line-height: 36px">{{article.comment}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                    <!--pagelist-->
                    <div class="pagelist"><a title="Total record">&nbsp;<b>67</b> </a>&nbsp;&nbsp;&nbsp;<b>1</b>&nbsp;<a
                            href="/download/index_2.html">2</a>&nbsp;<a href="/download/index_3.html">3</a>&nbsp;<a
                            href="/download/index_2.html">下一页</a>&nbsp;<a href="/download/index_3.html">尾页</a></div>
                    <!--pagelist end-->
                </div>

                <!--bloglist end-->
            </div>
        </div>
    </article>
    <footer>
        <div class="box">
            <div class="wxbox">
                <ul>
                    <li><img src="/images/wxgzh.jpg"><span>微信公众号</span></li>
                    <li><img src="/images/wx.png"><span>我的微信</span></li>
                </ul>
            </div>
            <div class="endnav">
                <p><b>站点声明：</b></p>
                <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
                <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a
                        href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=HHh9cn95b3F1cHVye1xtbTJ-c3E"
                        target="_blank">dacesmiling@qq.com</a></p>
                <p>Copyright © <a href="#" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a
                        href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备11002373号-1</a></p>
            </div>
        </div>
        <a href="#">
            <div class="top"></div>
        </a></footer>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data() {
            return {
                userId: '1',
                userDTO: {},
                updateInfo: false,
                fm_user: {
                    id: '',
                    username: '',
                    sex: 0,
                    phone: '',
                    birthday: '',
                    profile: '',
                    introduction: '',
                    avatar: ''
                },
                imageUrl: ''
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get("/user/selectUserInfo/" + this.userId).then(res => {
                    console.log(res.data);
                    this.userDTO = res.data.data;
                    this.saveBase();
                    console.log(this.fm_user);
                })
            },
            showUpdate() {
                this.updateInfo = true;
            },
            saveBase() {
                this.fm_user.id = this.userId;
                this.fm_user.username = this.userDTO.user.username;
                this.fm_user.sex = this.userDTO.user.sex;
                this.fm_user.phone = this.userDTO.user.phone;
                this.fm_user.birthday = this.userDTO.user.birthday;
                this.fm_user.profile = this.userDTO.user.profile;
                this.fm_user.introduction = this.userDTO.user.introduction;
                this.fm_user.avatar = this.userDTO.user.avatar;
            },
            updateUser() {
                axios.post("/user/update", this.fm_user).then(res => {
                    console.log(res.data);
                    if (res.data.code == 20000) {
                        this.getData();
                        this.$message.success(res.data.message);
                        this.updateInfo = false;
                    } else {
                        this.$message.error(res.data.err);
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                this.fm_user.avatar = res.data.url;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>
</body>
</html>
